<template>
	<view class="form-container">
		<!-- <text class="header-text">新增站房</text> -->
		<view class="example">
			<uni-forms ref="stationForm" :modelValue="formData" :rules="rules" class="form-container-box">
				<!-- 设备名称 -->
				<uni-forms-item label-width="85" label="站房名称" required name="stationName" class="info-item">
					<uni-easyinput v-model="formData.stationName" placeholder="请输入站房名称" />
				</uni-forms-item>
				<!-- 设备标识 -->
				<uni-forms-item label-width="85" label="站房地址" required name="stationAddress" class="info-item">
					<uni-easyinput v-model="formData.stationAddress" placeholder="请输入站房地址" />
				</uni-forms-item>
				<!-- 设备类型 -->
				<uni-forms-item label-width="85" label="站房状态" required name="status" class="info-item">
					<uni-data-select v-model="formData.status" :localdata="statusOption" />
				</uni-forms-item>
				<!-- 设备地址 -->
				<uni-forms-item label-width="85" label="网络状态" required name="netStatus" class="info-item">
					<uni-data-select v-model="formData.netStatus" :localdata="netStatusOption" />
				</uni-forms-item>
				<!-- 设备端口 -->
				<uni-forms-item label-width="85" label="设备厂家" required name="manufacturersName" class="info-item">
					<!-- <uni-easyinput v-model="formData.manufactureres" placeholder="请输入设备厂家" /> -->
					<uni-data-select @change="selectManu()" v-model="formData.manufacturersName"
						:localdata="manuOption" />
				</uni-forms-item>
				<uni-forms-item label-width="85" label="设备IP&nbsp;&nbsp;&nbsp;" required name="deviceIp"
					class="info-item">
					<uni-easyinput disabled v-model="formData.deviceIp" placeholder="请输入设备IP" />
				</uni-forms-item>
				<uni-forms-item label-width="85" label="设备端口" required name="port" class="info-item">
					<uni-easyinput disabled v-model="formData.port" placeholder="请输入端口" />
				</uni-forms-item>
				<uni-forms-item label-width="85" label="用户名&nbsp;&nbsp;&nbsp;" required name="username"
					class="info-item">
					<uni-easyinput disabled v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label-width="85" label="网关密码" required name="gatewayPwd" class="info-item">
					<uni-easyinput disabled v-model="formData.gatewayPwd" placeholder="请输入网关密码" />
				</uni-forms-item>
			</uni-forms>

			<!-- 操作按钮 -->
			<view class="footer-btn">
				<button form-type="reset" class="reset" @click="reset()">重置</button>
				<button type=" primary" form-type="submit" class="submit" @click="add()">确认</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import { WEB_URL } from '../../config/global';
	import { onLoad } from '@dcloudio/uni-app';
	import { changeData, getJsonData } from '../../js_sdk/file';
	const stationList = ref([])
	const platform = ref()
	const manuList = ref([])
	const gatewayData = ref()
	const videoData = ref()
	const formData = reactive({
		stationName: "",
		stationAddress: "",
		status: 2,
		netStatus: 1,
		manufacturersName: "",
		deviceIp: "",
		username: "",
		gatewayPwd: "",
		port: "",
		stationId: "",
		gatewayData: {},
		videoData: {}
	})

	const manuOption = ref([])
	// 下拉选项数据源
	const statusOption = ref([{
		text: '已调试',
		value: 1
	},
	{
		text: '未调试',
		value: 2
	}
	]);

	const netStatusOption = ref([{
		text: '良好',
		value: 1
	},
	{
		text: '弱',
		value: 2
	}
	]);


	// 校验规则
	const rules = {
		stationName: {
			rules: [{
				required: true,
				errorMessage: '站房名称不能为空'
			}]
		},
		stationAddress: {
			rules: [{
				required: true,
				errorMessage: '站房地址不能为空'
			}]
		},
		status: {
			rules: [{
				required: true,
				errorMessage: '请选择站房状态'
			}]
		},
		netStatus: {
			rules: [{
				required: true,
				errorMessage: '请选择网络状态'
			}]
		},
		manufacturersName: {
			rules: [{
				required: true,
				errorMessage: '厂商不能为空'
			}]
		},
		deviceIp: {
			rules: [{
				required: true,
				errorMessage: '设备ip不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))(\.((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))){3}$/
					if (reg.test(value)) {
						return true
					} else {
						callback('ip地址格式错误')
					}
				}
			}],
		},

		username: {
			rules: [{
				required: true,
				errorMessage: '用户名不能为空'
			}]
		},

		gatewayPwd: {
			rules: [{
				required: true,
				errorMessage: '网关密码不能为空'
			}]
		},
		port: {
			rules: [{
				required: true,
				errorMessage: '端口不能为空'
			}]
		},
	};

	// 表单引用，用于触发校验等操作
	const stationForm = ref(null);

	onLoad(async () => {
		//读取站房数据
		let filePath = '_doc/test/station.json'
		let dataJson = await getJsonData(filePath)
		if (dataJson !== '') {
			stationList.value = JSON.parse(dataJson);
		}


		let platPath = '_doc/test/platform.json'
		let platJson = await getJsonData(platPath)
		if (platJson !== '') {
			platform.value = JSON.parse(platJson);
		}

		//读取厂家数据
		let manuPath = '_doc/test/manufacturers.json'
		let manuData = await getJsonData(manuPath)
		if (manuData !== '') {
			manuList.value = JSON.parse(manuData);
			for (let i = 0; i < manuList.value.length; i++) {
				let obj = { text: manuList.value[i].manufacturersName, value: manuList.value[i].manufacturersName }
				manuOption.value.push(obj)
			}
		}

	});

	const selectManu = () => {
		let find = manuList.value.find(item => item.manufacturersName === formData.manufacturersName)
		gatewayData.value = find.gatewayData
		videoData.value = find.videoData
		formData.deviceIp = find.gatewayData.gatewayIP
		formData.port = find.gatewayData.gatewayPort
		formData.username = find.gatewayData.gatewayUsername
		formData.gatewayPwd = find.gatewayData.gatewayPassword
	}

	const add = async () => {
		const valid = await stationForm.value.validate();
		let filePath = '_doc/test/station.json'
		if (valid) {
			formData.stationId = Math.random().toString().slice(2, 10);
			formData.videoData = videoData.value
			formData.gatewayData = gatewayData.value
			stationList.value.push(formData)
			const change = await changeData(filePath, 0, stationList.value);
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			});
			uni.switchTab({
				url: '/pages/stationManage/stationManage'
			})
		} else {
			//校验失败
		}
	}

	const reset = () => {
		formData.stationName = ''
		formData.stationAddress = ''
		formData.status = 1
		formData.netStatus = 1
		formData.manufacturersName = ''
		formData.deviceIp = ''
		formData.username = ''
		formData.gatewayPwd = ''
		formData.stationId = ''
		formData.port = ''
		formData.gatewayData = {}
		formData.videoData = {}
	}
</script>

<style>
	/* 全局字体大小 */
	.form-container {
		font-size: 16px;
		padding: 20px;
	}

	.header-text {
		font-size: 24px;
		color: #333;
		display: flex;
		justify-content: center;
		/* margin-bottom: 30px; */
	}

	.example {
		padding: 20px;
	}

	/* 表单容器 */
	.form-container-box {
		padding: 30px;
		border-radius: 8px;
	}

	/* 表单项 */
	.info-item {
		margin-bottom: 8px;
	}

	.uni-forms-item {
		align-items: center;
	}

	.uni-forms-item__label {
		font-size: 16px;
		width: 100px;
		/* 固定标签宽度 */
		text-align: right;
		padding-right: 10px;
		/* 增加标签与输入框之间的间距 */
		box-sizing: border-box;
	}

	.uni-easyinput,
	.uni-data-select {
		font-size: 16px;
		/* padding: 10px 0; */
		border-radius: 4px;
		width: 100%;
	}

	.uni-easyinput__placeholder-class {
		font-size: 16px;
	}

	/* 按钮 */
	.footer-btn {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.submit,
	.reset {
		font-size: 18px;
		padding: 0 30px;
		margin: 0 10px;
		border-radius: 4px;
	}

	.submit {
		background-color: #48b0b1 !important;
	}

	.reset {
		background-color: #f4f4f4;
		/* color: #333; */
	}



	.uni-easyinput__content-input {
		font-size: 18px;
	}

	.uni-forms-item__label {
		font-size: 18px !important;
		width: 100px !important;
	}

	.uni-easyinput__placeholder-class {
		font-size: 18px !important;
	}
</style>